<template>
  <div>
    <!-- 头部tab -->
    <!-- <div class="top_tab">
      <div class="left" @click="back()">
        <img  src="../assets/order_center/shangs.png">
      </div>
      <span>我的银行卡</span>
      <div class="right">
        <img  src="../assets/bankcar/jia.png" @click="addcarClick()">
      </div>
    </div> -->
		 <!-- <div class="top_tab">
      <div class="left" @click="back()">
        <img  src="../assets/order_center/shangs.png">
      </div>
      <span>修改安全密码</span>
      <div class="right">
      </div>
    </div> -->
		<div class="car_list">
			<!-- <div class="car" @click="removeClick(item.id,item.credit_card_numbers)" v-for="(item,index) in cardLists" :key="index"> -->
			<div class="car"  @click="onClick(item.user_name,item.credit_card_numbers,item.bank_card_name)" v-for="(item,index) in cardLists" :key="index">
				<div class="pic">
					<img src="../assets/bankcar/ai.png">
				</div>
				<div class="right">
					<div class="top">
						<span>{{item.bank_card_name}}</span>
						<span class="k">储蓄卡</span>
					</div> 
					<div class="num">
						<img src="../assets/bankcar/hua.png">
						<img src="../assets/bankcar/hua.png">
						<img src="../assets/bankcar/hua.png">
						<span>{{String(item.credit_card_numbers).substring(String(item.credit_card_numbers).length-4)}}</span> 
					</div>
				</div>
			</div> 
		</div>
		<!-- 无数据 -->
			<div class="without" v-if="cardLists.length==0">
				<img src="../assets/order_center/kongbai.png" alt="">
				<span>暂无数据~</span> 
			</div> 
			<!-- <div class="tianjia" @click="addcarClick()">添加银行卡</div> -->
			
	</div>
</template>

<script>
export default {
  name: 'bankcar',
  data () {
    return {   
		 cardLists:[],
    }
  },
  methods:{
    back: function() {
      this.$router.go(-1);
		},
		addcarClick:function() {
      this.$router.push("addcar");
		},
		// removeClick:function(id,num) {
    //   this.$router.push("remove?yid="+id+"&num="+num);
		// },
		onClick(x,y,z){
			 sessionStorage.setItem("xm",x); 
			 sessionStorage.setItem("yhk",y); 
			 sessionStorage.setItem("zh",z); 
       this.$router.go(-1);
		},
		CardList:function(){ 
			let self = this;
      let url = "/api/bank_card/index";
			self.httpPost(url,{user_id:this.myid,token:this.token,p:1,psize:999},function(res) {
				if (res.code == 200) {
				 self.cardLists = res.data;
				}else{
				 	self.$dialog.toast({mes:res.msg});
        }
      })
		},
	
	},
	created(){
			document.title = "银行卡列表";
			this.token = localStorage.getItem('mytoken');
			this.myid = localStorage.getItem('myid'); 
			this.CardList()
		},
}
</script>


<style scoped>
.top_tab{
  width:100%;
  padding:.2rem .3rem;
  background: #FFF;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: .01rem .01rem .06rem #ddd;
}
.top_tab span{
  color:#333;
  font-size: .36rem;
}
.top_tab  img{
  width:.43rem;
	height:.46rem;
}
.car_list{
	width: 100%;
	padding-bottom: 1rem; 
} 
 .car{
	width:90%;
	height:2.75rem;
	margin: 0 auto;
	border-radius: 10px;
	background:-webkit-linear-gradient(left,#fe8973,#fa565f);
	background:-o-linear-gradient(right,#fe8973,#fa565f);
	background:-moz-linear-gradient(right,#fe8973,#fa565f);
	background:linear-gradient(to right,#fe8973,#fa565f);
	padding: .3rem .3rem;
	display: flex;
}
.car{
	margin-top: .2rem;
}
.car_list .car .pic{
	width:.75rem;
	height:.75rem;
}
.car_list .car .pic img{
	width:100%;
	height:100%;
}
.car_list .car .right{
	margin-left: .3rem;
	flex: 1;
}
.car_list .car .right .top{
	display: flex;
	flex-direction: column;
}
.car_list .car .right .top span{
	font-size: .32rem;
	color:#fefefe;
}
.car_list .car .right .top .k{
	font-size: .28rem;
	color:#fff;
	margin-top: .1rem;
}
.car_list .car .right .num{
	display: flex;
	align-items: center;
	width: 100%; 
	margin-top: .64rem;
}
.car_list .car .right .num img{
	width:.89rem;
	height:.23rem;
}
img~img{
	margin-left: .4rem;
}
.car_list .car .right .num span{
	margin-left: .4rem;
	font-size: .32rem;
	color:#FFF;
}
/* 无数据 */
.without{
  width:100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 30%;
}
.without img{
  width: 3.23rem;
  height:3.16rem;
}
.without span:nth-child(2){
  font-size: .36rem;
  color:#707070;
  margin-top: .43rem;
}
.without span:nth-child(3){
  font-size: .30rem;
  color:#b7b7b7;
  margin-top: .3rem;
}
.without .cate{
  color: #FFF; 
	width:2.27rem;
	height:.80rem;
  line-height: .80rem;
  border-radius:10px; 
  font-size: .30rem;
  text-align: center;
	background: #e53a30;
	border:none;
  margin-top: .96rem;
}
.tianjia{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	line-height: 1rem;
	text-align: center;
	color: #fff;
	font-size: .32rem;
	background: #e53a30;
}
</style>




